<template>
  <view class="content">
    <map :latitude="latitude" :longitude="longitude" scale="16" :markers="markers"></map>
    <view class="wait">
      <view class="text">
        等待配送
      </view>
      <view class="distance">
        距离我
        <text>{{distance}}</text>km
      </view>
    </view>
    <view class="bottom">
      <view class="text1">
        预计 <text>16:43</text>前送达
      </view>
      <view class="text2">
        若 16:43 之前未送达，请联系商家
      </view>
      <view class="button">
        <image
          src="https://cdn8.axureshop.com/demo/2116044/images/%E5%88%B6%E4%BD%9C%E4%B8%AD%E8%AE%A2%E5%8D%95%E8%AF%A6%E6%83%85/u3337.png">
        </image>
        <text>催单</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        distance: 2.1,
        latitude: 39.909,
        longitude: 116.39742,
        markers: [{
          id: 1,
          // width: '20rpx',
          // height: '20rpx',
          latitude: 27.407263683041606,
          longitude: 102.18296,
          iconPath: '/static/logo.png'
        }],
      }
    },
    methods: {

    },
    onShow() {

      uni.getLocation({
        type: 'wgs84',
        success: function(res) {
          console.log('当前位置的经度：' + res.longitude);
          console.log('当前位置的纬度：' + res.latitude);
          this.longitude = res.longitude
          this.latitude = res.latitude
          this.markers = [{
            id: 1,
            // width: '20rpx',
            // height: '20rpx',
            latitude: res.latitude,
            longitude: res.longitude,
            iconPath: '/static/logo.png'
          }]
        },
        fail(err) {
          console.log(err);
        }
      });

    }
  }
</script>

<style lang="scss">
  .content {
    height: calc(100vh + 226rpx);
    width: 100%;
    position: relative;

    map {
      height: calc(100vh + 226rpx);
      width: 100%;
    }

    .wait {
      position: absolute;
      left: 30%;
      top: 30%;
      background-color: white;
      padding: 20rpx 20rpx;
      border-radius: 16rpx;

      .distance {
        margin-top: 10rpx;
        color: #bebebe;
        font-size: 28rpx;

        text {
          color: #F77214;
        }
      }
    }

    .bottom {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 20%;
      margin: auto 40rpx;
      background-color: white;
      border-radius: 16rpx;
      padding: 50rpx 0;


      .text1 {
        font-size: 42rpx;
        margin-bottom: 20rpx;

        text {
          color: #F77214;
        }
      }

      .text2 {
        text-align: center;
        width: 90%;
        font-size: 28rpx;
        color: #bebebe;
        padding-bottom: 20rpx;
        border-bottom: #bebebe50 solid 2rpx;
      }

      .button {
        display: flex;
        // justify-content: center;
        align-items: center;
        margin-top: 20rpx;
        // align-self: center;
        // text-align: center;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 20rpx;
          // text-align: center;
        }

        font-size: 32rpx;
      }
    }
  }
</style>